<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试页</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.js"></script>
	<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
	
	<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
	<link href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" rel="stylesheet">
	<style type="text/css">
		.all,.main_div{
			padding: 1px 15px 1px 10px;
		}
		.div_header{
			text-align: center;
			font-weight: bold;
			font-size: 16px;
			border-bottom: 1px solid;
			padding-bottom: 10px;
			padding-top: 10px;
		}
		a {
    		color: blue;
    		text-decoration: underline;
    		cursor: pointer;
		}
		
	</style>
</head>
<body>
	<div id="el" class="all">
		<div class="div_header">
		</div>
		<div class="div_main">
			<div id="div_content" class="main_div">
				<div id="mainList" style="width: 100%;">
					
				</div>
			</div>
		</div>
		
	<div id="addDiv" style="width: 350px; height: 230px;padding: 15px;display: none;">
		<span>工作名称：{{work_name}}</span>
		<br/>
		完成时限(工作日)：<input type="text" id="mut" value="1" v-model="dur_time">
		<br/>
		<button type="button" class="btn btn-primary " @click="doUpdate();">保存</button>
		<button type="button" class="btn btn-primary " @click="closeAddItem();">取消</button> 
		
	</div>		
		
		
	</div>
	
</body>
<script type="text/javascript">

	Vue.prototype._resetQueryParam = function(){
		//console.log(this.queryParam);
		//递归
		this.queryParam
		for(let i in this.queryParam){
			this.queryParam[i] = null;
		}
	};

	var app = new Vue({
	  	el: '#el',
	  	data: {
	  		id: null,
	  		work_name: null,
	  		dur_time: null,
	  		addIndex: null,
	    	queryListDate: []
	  	},
	  	methods: {
	  		doUpdate: function(){
	  			var self = this;
	  			
				jQuery.ajax({
					url: '[[@{/}]]rest/mat/baseManager/updateWork',
					async: true,
					//dataType: 'json',
					contentType: "application/json",
					type: 'post',
					data: JSON.stringify(jQuery.extend({}, self._data)),//self.addParam,
					success: function(res){
						layui.use('layer', function(){
							var layer = layui.layer;
							layer.closeAll();
						});
						self.queryList();
					}
				});
	  		},
	  		toUpdate: function(id, work_name, dur_time){
	  			var self = this;
	  			self.id = id;
	  			self.work_name = work_name;
	  			self.dur_time = dur_time;
	  			layui.use('layer', function(){
					var layer = layui.layer;
					
					self.addIndex = layer.open({
					  type: 1,
					  shade: false,
					  title: false, //不显示标题
					  content: $('#addDiv') //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
					  
					});
	  			});
	  		}
			,queryList: function(){
				var self = this;
				layui.use('table', function(){
				  var table = layui.table;
				  window.myTable = table;
				  //var xh= $(window).height() -($("#projectList").height()+$("#mainList").offset().top-$(document).scrollTop());
				  var xh = 400;
				  table.render({
				    elem: '#mainList'
				    ,method: "get"
				    ,url: '[[@{/}]]rest/mat/baseManager/queryWorkList'
				    ,cols: [ [

  {field:'work_idx', width:200, title: '工作序号'}
  ,{field:'work_name', width:200, title: '工作名称'}
  ,{field:'dur_time', width:80, title: '完成时限（工作日）'}
  ,{field:'work_idx', title: '操作', width:200,templet:function(row){
	  return "<a onclick=\"app.toUpdate('"+row.id+"', '"+row.work_name+"', '"+(row.dur_time||"")+"');\">时效设置</a>";}}
				    ] ]
				  });
			      
				});
				
			}
			
	  	},
	  	mounted: function(){
		  	this.queryList();
	  	}
	})
</script>
</html>